<template>
  <div class="play-bed">
    <div :class="['appbox', isLongPress?'long-press-css':'long-press-not-css']" 
    v-for="(item, index) in subapplication"
    :key="index" 
    @touchstart="gtouchstart(item)"
    @touchmove="gtouchmove()"
    @touchend="showDeleteButton(item, $event)"
    >
      <!-- 序号：{{index}}
      <p>{{ item.meta.appAnother }}</p> -->
      <!-- 评分组件 -->
      <van-rate 
      :class="['vant-score', isLongPress ? 'isVanRate' : '']" 
      :readonly="!isScene" 
      v-model="item.meta.score" 
      allow-half 
      void-icon="star" 
      void-color="#eee"
      />
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />

    <!-- icon -->
    <div class="scene" @click="clcikScene" v-show="isScene">
      <img src="../assets/img/sceneSaving.png" alt="">
    </div>
  </div>
</template>

<script>
import subapplication from '@/router/subapplication'
import Sortable from 'sortablejs'
export default {
  data(){ 
    return {
      subapplication: subapplication,
      // 拖拽数据
      SortableFn:null,
      sortData: [],
      timeOutEvent:"",
      isLongPress:false,
      // 动作面板
      show:false,
      actions: [],

      isScene:false,
    }
  },
  methods:{
    // 拖拽
    rowDrop() {
      const tbody = document.querySelector(".play-bed");
      this.SortableFn = Sortable.create(tbody, {
        animation: 300,
        delay: 10,
        disabled:!this.isLongPress,
        // 如果有不想排序的，在这里按照class匹配的方式写出即可
        // filter:".appbox",
        // 需要拖拽的标签的class
        draggable:".appbox",
        forceFallback: true, // 使用HTML5拖放的回退方案
        scroll: false, // 禁止在拖动时滚动页面
        onEnd:({ newIndex, oldIndex })=>{
          let sortData = this.sortData;
          let temp=sortData[oldIndex-1]
          sortData.splice(oldIndex-1,1)
          sortData.splice(newIndex-1,-1,temp)
          this.sortData=sortData;
          this.isScene = true;
        },
        // onMove: function (/**Event*/evt, /**Event*/originalEvent) {
        //   console.log(evt, originalEvent)
        //   return 1
        // },
        onStart: () => {
          this.isScene = false;
        },
      });
    },
    //长按事件（起始）
    gtouchstart(item) {
      var self = this;
      this.timeOutEvent = setTimeout(function () {
        self.longPress(item);
      }, 800);
      return false;
    },
    //手释放，如果在800毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    showDeleteButton(item, $event) {
      console.log(item)
      if($event.target.closest('.van-rate')) return false
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（如onclick事件）
        if(this.isLongPress){
          setTimeout(() => {
            this.actions = [{ name: '删除模块', type: 1 },{ name: '禁用模块', type: 1 }, { name: '退出编辑', type: 3 }]
            this.show = true
          }, 100);
        }
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress() {
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      if(!this.isLongPress){
        this.isLongPress = true;
        this.isScene = true;
        this.$notify({type:'success', message:'编辑模式'});
        this.rowDrop()
      }
    },
    onSelect(item) {
      if(item.type === 3){
        this.isLongPress = false;
        this.isScene = false;
        this.SortableFn.destroy()
      }
      this.show = false;
    },
    clcikScene(){
      this.show = true
      this.actions = [{ name: '临时布局', type: 1 }, { name: '保存布局', type: 2 }, { name: '退出编辑', type: 3 }]
    }
  }
}

</script>
<style scoped lang="scss">
.play-bed{
  width: 100%;
  height: calc(100% - 10px);
  display: grid;
  align-items: start;
  justify-items: center;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding-top: 10px;
  background-color: #212121;
  .appbox{
    width: 85%;
    height: 140px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:  4px 4px 10px #d1d1d1;
    position: relative;
    -webkit-user-drag:none;
    user-select: none;
  }
  .long-press-css{
    animation: shake 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  // 评分组件隐藏
  .isVanRate{
    display: flex !important;
  }
  // 评分组件
  .vant-score{
    position: absolute;
    bottom: 10%;
    left: 12%;
    display: none;
    animation: score 1s ease forwards;
  }
  @keyframes score {
    0%{
      bottom: 10%;
    }
    100%{
      bottom: 20%;
    }
  }
  // 保存图标 不能用这个shake动画，这个是别的地方用的，你得单独写一个 哦 我写的有名字你直接拿来用 哪个？
  .scene{
    position: fixed;
    bottom: 5%;
    left: 45%;
    animation: sceneAnim 1s ease forwards;
  }

  @keyframes shake {
    0% {
      box-shadow:  4px 4px 10px #d1d1d1
    }
    100% {
      box-shadow:  10px 10px 20px #d1d1d1
    }
  }
  @keyframes sceneAnim {
    0%{
      bottom: 5%;
    }
    100%{
      bottom: 8%;
    }
  }
}
.long-press-not-css{
  -webkit-user-drag: none !important;
}
</style>